<template>
  <!-- 这里用el-table报错：table.vue你可能在组件渲染函数中有一个无限更新循环。 -->
  <!-- 这里的表格需要用到原生HTML写，除非你去解决这个bug -->
  <el-card>
    <!-- colspan：可以实现横向跨列单元格合并效果 -->
    <!-- rowspan：可以实现跨行单元格合并效果。 -->
    <!-- 用原生HTML表格，样式需要美化一下 -->
    <table class="customTable" style="width: 100%; border-collapse: collapse">
      <thead>
        <slot name="title"></slot>
      </thead>
      <tbody>
        <!-- 在这里就可以遍历list数据 -->
        <slot name="body" v-if="list.length > 0" :list="list"></slot>
        <slot name="empty" v-else></slot>
      </tbody>
      <tfoot v-if="list.length > 0">
        <!-- 表格尾部 -->
        <slot name="footer" :combined="combined"></slot>
      </tfoot>
    </table>
  </el-card>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    combined: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .customTable {
  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 5px;
  overflow: hidden;
  background-color: #fff;
  thead {
    tr {
      width: 100%;
      &:first-of-type {
        background-color: #e0e7f9;
      }
      th {
        border-right: 1px solid #ebeef5;
      }
    }
  }

  tbody {
    .empty {
      text-align: center;
    }
  }

  tr {
    height: 35px;
    color: #333;
    text-align: center;
    padding: 0;
    border: 1px solid #ebeef5;
    border-right: none;

    td {
      border-right: 1px solid #ebeef5;
    }
    td::after {
      display: block;
      content: attr(title);
      font-weight: bold;
      color: transparent;
      margin-bottom: -1px;
      visibility: hidden;
      overflow: hidden;
    }
    td.link {
      color: #2f62d7;
      text-decoration: underline;
      cursor: pointer;
      transition: text-shadow 0.3s;
    }
    &:hover {
      background-color: #f5f7fa;
      td {
        // font-weight: bold;
      }
    }
  }

  tfoot {
    tr {
      border-bottom: 1px solid #ebeef5;
    }
    td {
      color: red;
      height: 35px;
      font-weight: bold;
    }
  }
}
</style>
